<script lang="ts" setup>
import type { RoutingModel } from '#/api/process/models';

import { onMounted, ref, watchEffect } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import {
  Button,
  Flex,
  InputSearch,
  List,
  ListItem,
  Popconfirm,
  Popover,
} from 'ant-design-vue';

import { deleteRoutingApi, getRoutingListApi } from '#/api/process/routing';
import { CopyIcon, DeleteIcon, EditIcon } from '#/components/icons';

import CopyRoutingForm from './modules/copy-form.vue';
import RoutingForm from './modules/form.vue';

defineOptions({
  inheritAttrs: false,
});

const searchKey = ref('');
const selected = defineModel<RoutingModel>('selected');
const data = ref<RoutingModel[]>([]);
const filterData = ref<RoutingModel[]>([]);

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: RoutingForm,
  destroyOnClose: true,
});

const [CopyFormModal, copyFormModalApi] = useVbenModal({
  connectedComponent: CopyRoutingForm,
  destroyOnClose: true,
});

/**
 * 新增
 */
function onCreate() {
  formModalApi.setData(null).open();
}

/**
 * 编辑
 */
function onEdit(item: RoutingModel) {
  formModalApi.setData(item).open();
}

/**
 * 删除
 */
async function onDelete(item: RoutingModel) {
  await deleteRoutingApi(item.id);
  await loadData();
}

/**
 * 复制
 */
function onCopy(item: RoutingModel) {
  copyFormModalApi.setData(item).open();
}

async function loadData() {
  data.value = await getRoutingListApi();
}

function lineItemClick(item: RoutingModel) {
  selected.value = item;
}

onMounted(async () => {
  await loadData();
});

watchEffect(() => {
  filterData.value = data.value.filter((s) =>
    s.routingName.includes(searchKey.value),
  );
});
</script>

<template>
  <div class="h-full w-full">
    <FormModal @success="() => loadData()" />
    <CopyFormModal @success="() => loadData()" />
    <List
      :data-source="filterData"
      :split="false"
      bordered
      class="h-full overflow-auto"
      size="small"
    >
      <template #header>
        <Flex class="w-full">
          <div class="w-10/12">
            <InputSearch
              v-model:value="searchKey"
              allow-clear
              placeholder="输入工艺路线"
              size="small"
            />
          </div>
          <div class="ml-2 w-2/12">
            <Button size="small" @click="onCreate()"> 新增 </Button>
          </div>
        </Flex>
      </template>
      <template #renderItem="{ item }">
        <ListItem>
          <template #actions>
            <Popover>
              <template #content> 编辑 </template>
              <EditIcon class="cursor-pointer" @click="onEdit(item)" />
            </Popover>
            <Popconfirm title="确定要删除吗？" @confirm="onDelete(item)">
              <DeleteIcon class="cursor-pointer" />
            </Popconfirm>
            <Popover>
              <template #content> 复制 </template>
              <CopyIcon class="cursor-pointer" @click="onCopy(item)" />
            </Popover>
          </template>
          <div
            :class="[{ isActive: item.id === selected?.id }]"
            class="w-full cursor-pointer rounded-sm px-1"
            @click="lineItemClick(item)"
          >
            {{ item.routingName }}
          </div>
        </ListItem>
      </template>
    </List>
  </div>
</template>

<style scoped>
.isActive {
  background-color: #1890ff;
}
</style>
